<template>
  <div class="ifr">
    <div class="tit">
      <span>疑似空照片</span>
      <div style="font-weight: normal;font-size: .16rem;display: flex;align-items: center;">
        <span style="margin-right: .05rem;">全选</span>
        <input style="width: .2rem;height: .2rem;" type='checkbox' @change="allin"
               :checked="checkedCities.length==listLength">
        <span style="margin-left: .3rem;color: #666666">已选{{checkedCities.length}}张</span>
        <el-button style="margin-left: .15rem;" type="success" size="small" @click="delysk">确认删除</el-button>
      </div>
    </div>
    <div class="idresult clearfix">
      <div v-for="item in list" style="position: relative">
        <!--选择框B-->
        <input class="singcheck" type='checkbox' @change="singlein(item.id)"
               :checked="checkedCities.indexOf(item.id)!=-1">
        <!--选择框E-->
        <img :src="isMp4(item.accessorySrc)=='照片'?item.accessorySrc:'../../static/images/shipin.jpg'"
             @click.stop="emptyaui(item)" alt="">
      </div>
    </div>

    <!--分页B-->
    <div style="width: 100%;position:absolute;bottom:.3rem;left: 0;text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        @current-change="handleCurrentChange"
        :page-size="18"
        :total="totlnum">
      </el-pagination>
    </div>

    <!--分页E-->
  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'

  export default {
    data() {
      return {
        areaId: "",
        list: [],
        listLength: -1,
        checkedCities: [],
        photonum: 0,
        totlnum: 0,
        currentPage: 1
      }
    },
    created() {
      this.areaId = sessionStorage.getItem('areaId');
      if (window.sessionStorage.getItem('pagenum') != null) {
        this.currentPage = parseInt(window.sessionStorage.getItem('pagenum'));
        this.refreshdel();
        window.sessionStorage.removeItem('pagenum');
      } else {
        this.getdata();
      }
    },

    methods: {
      emptyaui(item) {
        window.sessionStorage.setItem('empty', JSON.stringify(item));
        window.sessionStorage.setItem('pagenum', JSON.stringify(this.currentPage));
        this.$router.push("/Photo/Emptyphoto/Emptyphotoaut")
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        console.log(this.currentPage);
        this.getdata();
      },
      allin() {
        if (this.listLength > 0) {
          if (this.checkedCities.length < this.listLength) {
            let arr = [];
            this.list.forEach(e => {
              arr.push(e.id)
            })
            this.checkedCities = arr;
          } else {
            this.checkedCities = [];
          }
        }
      },
      singlein(id) {
        if (this.checkedCities.indexOf(id) == -1) {
          this.checkedCities.push(id)
        } else {
          this.checkedCities.splice(this.checkedCities.indexOf(id), 1)
        }
      },
      delysk() {
        let vm = this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          (async function f() {
            let res = await http.post('/sapi/realTimeCamera/deleteImageList', vm.checkedCities)
            if (res.data.code == '200') {
              vm.refreshdel();
              vm.$message({
                type: 'success',
                message: '删除成功!'
              });

            }
          })()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      refreshdel() {
        this.checkedCities = [];
        let vm = this, pagenum = this.currentPage;
        (async function () {
          let res = await http.get('/iapi/authenticate/getInvalidPhotos', {
            areaId: vm.areaId,
            pageSize: 18,
            pageNum: pagenum,
          })
          if (res.data.code == '200') {
            if (res.data.data.content.length > 0) {
              vm.listLength = res.data.data.content.length;
              vm.list = res.data.data.content;
              vm.totlnum = res.data.data.totalElements;
            } else if (pagenum > 1) {
              let newnum = pagenum - 1;
              (async function () {
                let re = await http.get('/iapi/authenticate/getInvalidPhotos', {
                  areaId: vm.areaId,
                  pageSize: 18,
                  pageNum: newnum,
                })
                if (re.data.code == '200' && re.data.data.content.length > 0) {
                  vm.currentPage = newnum
                  vm.listLength = re.data.data.content.length;
                  vm.list = re.data.data.content;
                  vm.totlnum = re.data.data.totalElements;
                } else {
                  vm.currentPage = 1;
                  vm.totlnum = 0;
                  vm.listLength = -1;
                }
              })()
            }
          }
        })()
      },
      getdata() {
        this.checkedCities = [];
        let vm = this;
        (async function () {
          let res = await http.get('/iapi/authenticate/getInvalidPhotos', {
            areaId: vm.areaId,
            pageSize: 18,
            pageNum: vm.currentPage,
          })
          if (res.data.code == '200') {
            if (res.data.data.content.length > 0) {
              vm.listLength = res.data.data.content.length;
              vm.list = res.data.data.content;
              vm.totlnum = res.data.data.totalElements;
            }

          }
        })()
      },
      iscloud(p) {
        if (p != "" && p != null) {
          if (p.split(":")[0] == 'http'||p.split(":")[0] == 'https') {
            return p
          } else {
            return '/iapi' + p[0]
          }
        } else {
          return '../../static/images/np.jpg'
        }
      },
      isMp4(m) {
        let iv = m.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          return '视频'
        } else {
          return '照片'
        }
      },
    }
  }
</script>
<style scoped>
  @import "../../static/css/identificationResult.css";
</style>
<style>

</style>
